آموزش React native - قسمت پنجم

دوره آموزش React native

سلام در بخش چهارم آموزش React Native مفاهیم Flex,Flex Direction,Layout Direction,align Items,Align Content,Flex Wrap,Flex Basis، Grow و Shrink,Width و Height در React Native را یاد گرفتیم . حال با بخش چهارم با ما همراه باشید:

مدیریت ورودی های متنی

کامپوننت Component پایه ای که برای دریافت ورودی از کاربر استفاده می شود TextInput است. این componentیک prop به اسم Text دارد که می توان به آن تابعی داد که پس از هر تغییر متن صدا زده شود. یک prop به اسم Editing دارد که می توان به آن تابعی داد که هنگام ثبت دیتا، صدا زده شود.

برای مثال، فرض کنیم همزمان با تایپ کردن کاربر، قرار است کلمات به زبان دیگری ترجمه شوند. در این زبان جدید ترجمه هر کلمه ای است! جمله ی "Hello there Bob" به "" ترجمه می شود.

import React, { Component } from 'react';

import { Text, TextInput, View } from 'react-native';

export default class PizzaTranslator extends Component {

constructor(props) {

super(props);

this.state = {text: ''};

}

render() {

return (

style={{height: 40}}

placeholder="Type here to translate!"

Text={(text) => this.setState({text})}

value={this.state.text}

/>

{this.state.text.split(' ').map((word) => word && '').join(' ')}

);

}

}

در این مثال، text را درون یک state نگه می داریم، چرا که در طول زمان مقدار آن متغیر است.

کارهای زیادی می توان روی TextInput ها انجام داد. برای مثال، می توان هنگام تایپ کردن کاربر، متن ورودی را اعتبارسنجی کرد. برای مثال هایی با جزئیات بیشتر، مستندات React را ببینید، یا مستندات مربوط به TextInput را ببینید.

دریافت ورودی از کاربر یکی از راه های تعامل با کاربر است. در گام بعد، نگاهی به راه های کار با ورودی های touch کاربر می اندازیم.

دوره آموزش React Native

مدیریت ورودی های touch در React Native

عمده ی تعامل کاربران با application های موبایل از طریق touchاست. آن ها از حرکاتی ترکیبی، مثل زدن یک button، بالا و پایین کردن یک لیست، zoom روی یک نقشه و... استفاده می کنند. React Native، component هایی برای کار با انواع حرکات متداول در اختیار می گذارد. علاوه بر آن یک سیستم جامع gesture responder برای شناسایی حرکات پیچیده تر دارد. اما componentپایه ای عمدتا از آن استفاده می کنیم یک buttonاست.

نمایش یک buttonساده

Button یک component ساده برای نمایش button است که روی همه پلتفرم ها به خوبی render می شود. مثالی ساده برای نمایش یک button در زیر می بینید:

onPress={() => {

alert('You tapped the button!');

}}

title="Press Me"

/>

این قطعه کد یک برچسب آبی در iOS، و یک مستطیل گرد آبی با متن سفید در androidخواهد بود. فشردن button موجب فراخوانی تابع "onPress" می شود. که در این مثال، این تابع یک pop-upهشدار نمایش می دهد. می توانید یک propبرای "color" تعیین کنید و رنگ button را تغییر دهید.

مثال زیر کارهای جالب تری با button ها می کند. می توانید خروجی آن را در android و iOS ببینید.

import React, { Component } from 'react';

import { Button, StyleSheet, View } from 'react-native';

export default class ButtonBasics extends Component {

_onPressButton() {

alert('You tapped the button!')

}

render() {

return (

onPress={this._onPressButton}

title="Press Me"

/>

onPress={this._onPressButton}

title="Press Me"

color="#841584"

/>

onPress={this._onPressButton}

title="This looks great!"

/>

onPress={this._onPressButton}

title="OK!"

color="#841584"

/>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

},

buttonContainer: {

margin: 20

},

alternativeLayoutButtonContainer: {

margin: 20,

flexDirection: 'row',

justifyContent: 'space-between'

}

});

اگر یک button ساده برای application تان کافی نیست، می توانید با استفاده از component های "Touchable" موجود در React Native، button های سفارشی بسازید. این component ها قابلیت دریافت حرکات را دارند، و می توانند با شناسایی حرکات فیدبک مناسب بدهند. این component ها هیچ style پیش فرضی ندارند و برای اینکه ظاهری مناسب به آنها بدهید باید کمی کار کنید.

دوره آموزش React Native

با توجه به نوع فیدبکی که انتظار دارید می توانید از component های "Touchable" متفاوتی استفاده کنید:

عمدتا، می توانید از TouchableHighligh برای مواردی مثل یک link یا button در وب، استفاده کنید. پس زمینه ی view با فشردن button، تیره می شود.

می توانید از TouchableNativeFeedback در android برای نمایش feedback به کاربر استفاده کنید.

می توان از TouchableOpacity برای feedback دادن از طریق کاهش button opacity استفاده کرد.

اگر میخواهید فیدبکی به کاربر نشان ندهید می توانید از TouchableWithoutFeedback استفاده کنید.

در بعضی موارد ممکن است بخواهید فشردن و نگه داشتن یک view برای مدت زمان مشخصی را شناسایی کنید. این فشردن های طولانی از طریق ارسال یک تابع به onLongPress هر component "Touchable" قایل مدیریت است.

آموزش React Native

در مثال زیر می توان این موضوع را تست کرد:

import React, { Component } from 'react';

import { Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';

export default class Touchables extends Component {

_onPressButton() {

alert('You tapped the button!')

}

_onLongPressButton() {

alert('You long-pressed the button!')

}

render() {

return (

TouchableHighlight

TouchableOpacity

onPress={this._onPressButton}

background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>

TouchableNativeFeedback {Platform.OS !== 'android' ? '(Android only)' : ''}

onPress={this._onPressButton}

>

TouchableWithoutFeedback

Touchable with Long Press

);

}

}

const styles = StyleSheet.create({

container: {

paddingTop: 60,

alignItems: 'center'

},

button: {

marginBottom: 30,

width: 260,

alignItems: 'center',

backgroundColor: '#2196F3'

},

buttonText: {

textAlign: 'center',

padding: 20,

color: 'white'

}

});

بالا و پایین رفتن در لیست ها، swipe کردن، و pinch-to-zoom

از حرکات رایج دیگر در موبایل ها swipe یا pan است. این حرکت به کاربر امکان بالا و پایین رفتن در لیست ها، یا حرکت در صفحات را می دهد. برای کار با اینگونه حرکات، باید کار با ScrollView را یاد بگیریم.

آموزش React Native

 

استفاده از ScrollView در React Native:

اسکرول ScrollView یک container scroll کلی است که می تواند چندین component و view را در خود نگه دارد. آیتم های قابل scroll لازم نیست هم نوع باشند، و می توان آن ها را هم افقی (با مقداردهی بهprop horizontal) و هم عمودی scroll کرد.

این مثال یک ScrollView با قابلیت scroll عمودی، حاوی ترکیبی از عکس و متن می سازد:

import React, { Component } from 'react';

import { ScrollView, Image, Text } from 'react-native';

export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {

render() {

return (

Scroll me plz

If you like

Scrolling down

What's the best

Framework around?

React Native

);

}

}

اسکرول ScrollView ها می توانند با استفاده از pagingEnabled به گونه ای تنظیم شوند که بتوان چندین صفحه داشت و بین آن ها حرکت کرد. حرکت افقی بین viewها در android نیز با استفاده از component ViewPager قابل پیاده سازی است.

در iOS، یک ScrollView با فقط یک آیتم می تواند برای ایجاد امکان zoom استفاده شود. با تنظیم مقادیر برای maximumZoomScale و minimumZoomScale امکان بزرگ و کوچک کردن محتوا توسط حرکات pinch and expand ممکن خواهد بود.

استفاده از ScrollView برای نمایش تعداد کمی آیتم در سایز محدود مناسب است، چرا که همه المان ها و view های یک ScrollView، render می شوند، حتی اگر در لحظه در صفحه قابل نمایش نباشند. اگر لیست طویلی از آیتم ها دارید که در صفحه جا نمی شود، باید از FlatList ها استفاده کنید. مرحله بعد یادگیری درمورد list view ها خواهد بود.

استفاده از List View در React Native

ری اکت React Native مجموعه ای از component ها برای نمایش لیست ها در اختیار می گذارد. عمدتا از FlatList یا SectionList استفاده می شود.

کامپوننت component FlatList لیستی از دیتای متغیر اما ساختار- ثابتی را نمایش می دهد. FlatList برای لیست های طویل که تعداد آیتم های آن درزمان تغییر می کند، مناسب است. برخلاف ScrollView، FlatList فقط المان هایی که در لحظه روی صفحه قابل نمایش هستند را، render می کند.

کامپوننت component FlatList دو prop لازم دارد: data و renderItem. Data منبع دیتای درون لیست را تعیین می کند. renderItem یک آیتم از منبع برمی دارد ویک component فرمت شده برای render برمی گرداند.

این مثال یک FlatList ساده با دیتای ثابت می سازد. هر آیتم درون data به صورت یک component Text، render می شود. سپس component FlatListBasics، FlatList و همه ی component های Text را render می کند.

import React, { Component } from 'react';

import { FlatList, StyleSheet, Text, View } from 'react-native';

export default class FlatListBasics extends Component {

render() {

return (

data={[

{key: 'Devin'},

{key: 'Dan'},

{key: 'Dominic'},

{key: 'Jackson'},

{key: 'James'},

{key: 'Joel'},

{key: 'John'},

{key: 'Jillian'},

{key: 'Jimmy'},

{key: 'Julie'},

]}

renderItem={({item}) => {item.key}}

/>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

paddingTop: 22

},

item: {

padding: 10,

fontSize: 18,

height: 44,

},

})

زمانی که بخواهیم دیتا را درون یک ساختار منطقی بشکنیم، و احتمالا هر قسمت یک تیتر داشته باشد، SectionList به کار می آید که عملکردی مشابه UITableView ها در iOS دارد.

import React, { Component } from 'react';

import { SectionList, StyleSheet, Text, View } from 'react-native';

export default class SectionListBasics extends Component {

render() {

return (

sections={[

{title: 'D', data: ['Devin', 'Dan', 'Dominic']},

{title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},

]}

renderItem={({item}) => {item}}

renderSectionHeader={({section}) => {section.title}}

keyExtractor={(item, index) => index}

/>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

paddingTop: 22

},

sectionHeader: {

paddingTop: 2,

paddingLeft: 10,

paddingRight: 10,

paddingBottom: 2,

fontSize: 14,

fontWeight: 'bold',

backgroundColor: 'rgba(247,247,247,1.0)',

},

item: {

padding: 10,

fontSize: 18,

height: 44,

},

})

یکی از رایج ترین کاربردهای List View نمایش دیتای دریافتی از server است. برای این کار لازم است درمورد ارتباطات تحت شبکه در React Native بدانیم.

آموزش React Native

با ادامه آموزش ششم همراه با باشیددوره آموزش React native

سلام در بخش چهارم آموزش React Native مفاهیم Flex,Flex Direction,Layout Direction,align Items,Align Content,Flex Wrap,Flex Basis، Grow و Shrink,Width و Height در React Native را یاد گرفتیم . حال با بخش چهارم با ما همراه باشید:

مدیریت ورودی های متنی

کامپوننت Component پایه ای که برای دریافت ورودی از کاربر استفاده می شود TextInput است. این componentیک prop به اسم Text دارد که می توان به آن تابعی داد که پس از هر تغییر متن صدا زده شود. یک prop به اسم Editing دارد که می توان به آن تابعی داد که هنگام ثبت دیتا، صدا زده شود.

برای مثال، فرض کنیم همزمان با تایپ کردن کاربر، قرار است کلمات به زبان دیگری ترجمه شوند. در این زبان جدید ترجمه هر کلمه 

آموزش React Native فارسی

سلام در بخش سوم آموزش React Native مفاهیم component , Props, State, Style, Widthو Height در React Native را یاد گرفتیم . حال با بخش چهارم با ما همراه باشید:

آموزش Layout با استفاده از Flexbox

یک component می تواند چیدمان component های childخودرا با استفاده از algorithm Flexbox تعیین کند. Flexbox برای ایجاد یک Layout پایدار روی صفحات با سایزهای مختلف طراحی شده است.

با استفاده از ترکیبی از flexDirection، alignItems، و justifyContent می توان Layout مناسب طراحی کرد.

فلکس باکس Flexbox در React Nativeشبیه CSS عمل می کند. با این تفاوت که مقادیر پیش فرض متفاوتند. flexDirection به جای row، مقدار پیش فرض column دارد، و flexفقط یک عدد می گیرد.

دوره آموزش React Native

فلکس Flex

فلکس Flex تعیین می کند آیتم ها چگونه در عرض محور اصلی، فضای موجود را پر کنند. فضا برحسب مقدار flex مربوط به هر المان، تقسیم بندی می شود.

در مثال زیر، view های قرمز، زرد و سبز هر سه childهای Viewبا flex:1 هستند. view قرمز از flex: 1 استفاده می کند، viewزرد flex: 2 و view سبز flex: 3. جمع مقادیر flex این سه 6 است که به این معناست که view قرمز 6/1 فضا، viewزرد 6/2 و view سبز 6/3 فضا را می گیرد.

فلکس Flex Direction

دوره آموزش React Native

فلکس Flex Direction جهت چیدمان childهای یک nodeرا تعیین می کند. به آن محور اصلی نیز می گویند. محور دیگر، محور متقاطع، محور عمود به محور اصلی است، یا همان محوری است که خطوط wrapping را دربرمیگیرد.

کامپوننت Row componentهای child را از چپ به راست میچیند. اگر wrapping فعال باشد، خط بعد دقیقا از زیر اولین آیتم از چپ شروع می شود.

ستون Column(مقدار پیش فرض) component های child را از بالا به پایین می چیند. اگر wrapping فعال باشد، خط بعد از اولین آیتم سمت چپ از بالا شروع می شود.

کامپوننت row-reverse component های child را از راست به چپ میچیند. اگر wrapping فعال باشد، خط بعد از زیر اولین آیتم از راست شروع می شود.

کامپوننت column-reverse component های child را از پایین به بالا می چیند. اگر wrapping فعال باشد، خط بعدی اولین آیتم سمت چپ از پایین شروع می شود.

import React, { Component } from 'react';

import { View } from 'react-native';

export default class FlexDirectionBasics extends Component {

render() {

return (

// Try setting `flexDirection` to `column`.

); }};

لایه Layout Direction

آموزش پروژه محور react native

لایه Layout Directionتعیین کننده ی جهتی است که در آن childها و متن در یک سلسله مراتب باید چیده شوند. Layout Directionتعیین کننده این هستند که start و end به کدام لبه ها اشاره می کنند. به طور پیش فرض چیدمان صفحات در React Native بصورت LTR است. در این حالت start به چپ و endبه راست اشاره می کند.

ال تی ار LTR (مقدار پیش فرض) متن ها و child ها از چپ به راست چیده می شوند. Margin و paddingکه برای start یک المان تعیین می شوند به سمت چپ اعمال می شوند.

ال تی ار RTLمتن ها و child ها از راست به چپ چیده می شوند. Margin و paddingکه برای start یک المان تعیین می شوند به سمت راست اعمال می شوند.

تراز کردن محتوا (justify Content)

محتوای justifyContentنحوه قرار گرفتن childها در راستای محور اصلی container شان را تعیین می کند. برای مثال، می توانید با استفاده از این ویژگی یک المان child را وسط یک containerقرار دهید؛ به این صورت که برای افقی وسط بودن، flexDirection را مساوی rowقرار دهید، برای عمودی وسط بودن، flexDirectionرا مساوی column قرار دهید.

فلکس flex-start(مقدار پیش فرض) child های یک container را از ابتدای محور اصلی آن، مرتب می کند.

فلکس flex-end child های یک container را از انتهای محور اصلی آن، مرتب می کند.

مرکز Center child های یک container را در راستای محور اصلی، وسط قرار می دهد.

فضای space-betweenالمان های child را در راستای محور اصلی container قرار می دهد و فضای اضافه را بین آن ها توزیع می کند.

فضای space-around المان های childرا در راستای محور اصلی container قرار می دهد و فضای اضافه را اطراف آن ها توزیع می کند. در مقایسه با space-between، فضای اضافه به ابتدا و انتهای اولین و آخرین child افزوده می شود.

import React, { Component } from 'react';

import { View } from 'react-native';

export default class JustifyContentBasics extends Component {

render() {

return (

// Try setting `justifyContent` to `center`.

// Try setting `flexDirection` to `row`.

flex: 1,

flexDirection: 'column',

justifyContent: 'space-between',

}}>

);

}

};

تراز کردن آیتم ها (align Items)

آموزش پروژه محور react native

تراز کردن آیتم ها alignItems تعیین کننده نحوه قرار گرفتن childها در راستای محور متقاطع container است. بسیار شبیه justifyContentعمل می کند، اما به جای اعمال شدن به محور اصلی، روی محور متقاطع اعمال می شود.

استرتچ Stretch(مقدار پیش فرض) child های یک container را امتداد می دهد تا کامل محور متقاطع را بگیرند و height معادل محور متقاطع داشته باشند.

فلکس flex-start child های یک container را از ابتدای محور متقاطع آن، مرتب می کند.

فلکس flex-end child های یک container را از انتهای محور متقاطع آن، مرتب می کند.

مرکز Center child های یک container را در راستای محور متقاطع ، وسط قرار می دهد.

لاین Baselineالمان های child را نسبت به یک نقطه مشترک مرتب می کند. المان های childمی توانند طوری تنظیم شوند که نقطه ارجاعی برای parentشان باشند.

برای اینکه استفاده از Stretch موثر باشد، المان child نباید در راستای محور دیگر بعد ثابت داشته باشد. در مثال زیر، مقداردهی به صورت alignItems: stretchاثری ندارد، مگر زمانی که width: 50از المان child حذف شود.

import React, { Component } from 'react';

import { View } from 'react-native';

export default class AlignItemsBasics extends Component {

render() {

return (

// Try setting `alignItems` to 'flex-start'

// Try setting `justifyContent` to `flex-end`.

// Try setting `flexDirection` to `row`.

flex: 1,

flexDirection: 'column',

justifyContent: 'center',

alignItems: 'stretch',

}}>

);

}

};

AlignSelf

ا alignSelfموارد مشابهی دارد و مثل alignItemsعمل می کند اما به جای اثر روی childدرون container، می توان آن را روی یک المان اعمال کرد ومستقل از parent، آن را تغییر داد. alignSelf هرچیزی که توسط alignItems و از طریق parentاعمال شده را، بی اثر می کند.

محتوای Align Content

آموزش پروژه محور react native

محتوای alignContentتوزیع خطوط در راستای محور عرضی را تعیین می کند. فقط زمانی اثر آن اعمال می شود که آیتم ها با استفاده از flexWrapدر چندین خط شکسته (wrapped) شوند.

فلکس flex-start(مقدار پیش فرض) خطوط شکسته (wrappedشده) را از ابتدای محور متقاطع containerمرتب می کند.

فلکس flex-endخطوط شکسته را از انتهای محور متقاطع containerمرتب می کند.

در Stretchخطوط شکسته را امتداد می دهد تا کامل محور متقاطع container را پر کنند.

مرکز centerخطوط شکسته را در راستای محور متقاطع container، وسط قرار می دهد.

فضای space-between خطوط شکسته را در راستای محور اصلی container قرار می دهد و فضای اضافه را بین آن ها توزیع می کند.

فضای space-aroundخطوط شکسته را در راستای محور اصلی containerقرار می دهد و فضای اضافه را اطراف آن ها توزیع میکند. در مقایسه با space-between، فضای اضافه به ابتدا و انتهای اولین و آخرین خط افزوده میشود.

فلکس Flex Wrap

دوره آموزش React Native

ویژگی flexWrapروی container ها مقداردهی می شود و به کمک آن می توان تعیین کرد هنگامی که المان های childدر راستای محور اصلی از container بیرون میزنند، چه اتفاقی بیوفتد. به طور پیش فرض المان های child باید در یک خط قرار بگیرند ( که ممکن است باعث جمع شدن غیرعادی المان ها شود). اگر شکستن خطوط (wrapping) ممکن باشد، آیتم ها در راستای محور اصلی در چند خط شکسته می شوند.

موقع شکستن خطوط می توان از alignContent برای تعیین چگونگی قرارگیری خطوط در container، استفاده کرد.

فلکس Flex Basis، Grow و Shrink

دوره آموزش React Native

فلکس flexGrowتعیین می کند چگونه فضای درون containerبین المان های child در راستای محور اصلی، توزیع شود. پس از قرارگرفتن المان های child درون container ، فضای باقی مانده با توجه به مقدار این متغیر در المان های child، توزیع می شود.

فلکس flexGrow هر مقدار اعشاری بزرگ تر 0 را می پذیرد و صفر مقدار پیش فرض آن است. یک container براساس مقدار flexGrowالمان های child خود، فضای باقی مانده را بین آن ها توزیع می کند.

فلکس flexShrinkتعیین می کند چگونه المان های childدر راستای محور اصلی کوچک شوند، در صورتی که اندازه آن ها از اندازه container شان درراستای محور اصلی، بیشتر شود. FlexShrink بسیار شبیه flexGrowعمل می کند و استفاده هم زمان از هر دو کمک می کند المان های child براساس نیاز بزرگ یا کوچک شوند.

فلکس flexShrinkهر مقدار اعشاری بزرگ تر 0 را می پذیرد و مقدار پیش فرض آن یک است. یک containerبراساس مقدار flexShrink المان های child خود، آن ها را کوچک می کند.

فلکس FlexBasisیک روش مستقل از محور برای تعیین اندازه پیش فرض یک آیتم در راستای محور اصلی است. مقداردهی به flexBasis برای یک المان child شبیه مقداردهی به widthآن المان است، درصورتی که parentآن flexDirection: row داشته باشد، و یا مقداردهی hight به آن المان درصورتی که parent آن flexDirection: column داشته باشد. مقدار FlexBasisیک آیتم، سایز آن آیتم است؛ سایز پیش فرضی که قبل از هرگونه بزرگ و کوچک شدن المان به آن اختصاص می یابد.

ارتفاع و پهنا Width و Height

دوره آموزش React Native

مقدار Widthیک المان نشان دهنده ی Width محتوای آن المان است. به طور مشابه، Height یک المان Heightمحتوای آن است.

می توان به هردو مقادیر زیر را نسبت داد:

اتو Auto مقدار پیش فرض است. React Native مقادیر width/height را برای المان بر اساس محتوایش محاسبه می کند.

پیکسل Pixelsتعیین کننده width/height براساس pixel به صورت absoluteمی باشد. با توجه به استایل های دیگر component، این مقادیر ممکن است اندازه نهایی ابعاد componentباشند یا نباشند.

درصد Percentageتعیین کننده width یا height یک component به صورت درصدی از width یا height المان parent آن می باشد.

لایه Layoutهای relative و absolute

نوع positionیک المان تعیین کننده نحوه قرار گرفتن آن نسبت به المان parent اش می باشد.

نسبی Relative(مقدار پیش فرض) به طور پیش فرض یک المان مکانی نسبی دارد. به این معنا که یک المان، اول با توجه به جایگیری نرمال آیتم ها، و سپس براساس مقادیر top، right، bottom و leftنسبت به مکان مورد انتظار، قرار می گیرد. این انحراف، بر مکان sibling element ها، و یا جای المان parentتاثیری ندارد.

مطلق Absoluteاگر المانی به طور مطلق جایی قرار گرفته باشد، در جایگیری نرمال آیتم ها شرکت نمی کند، مستقل از المان های siblingخود قرار می گیرد و مکان دقیقش به کمک مقادیر top ، right، bottom و leftتعیین میشود.

نگاهی عمیق تر

میتوانید برای فهم بهتر flexbox از این لینک استفاده کنید.

ما در اینجا به مفاهیم پایه پرداختیم، اما style های زیادی هستند که برای layoutهای خود به آن نیاز خواهید داشت. لیست کامل propهایی که برای کار با layout لازم است در اینجا قابل مشاهده است.

گام به گام به ساخت یک application واقعی نزدیک می شویم. یکی از مواردی که هنوز به آن نپرداخته ایم نحوه دریافت ورودی از کاربر است که در بخش بعد به آن می پردازیم.

می توانید در این مقاله، چند مثال از Wix Engineersببینید.

دوره آموزش React Native

آموزش پروژه محور React Native

سلام در بخش دوم آموزش React Native محیطهای اجرا React Native در android، iOS و Mac و iOS را آموزش دادیم حال با بخش سوم با ما همراه باشید:

در بخش اول آموزش React Native با مفاهیم پایه React Native آشنا شدیم

در ادامه برنامه ای را اجرا می کنیم

اولین برنامه، Hello World!

طبق سنت قدیمی برنامه نویس ها، اولین برنامه ما یک applicationساده است که هیچ کار نمی کند جز اینکه یک Hello, World! ساده را نشان دهد:

import React, { Component } from 'react';

import { Text, View } from 'react-native';

export default class HelloWorldApp extends Component {

render() {

return (

Hello, world!

);

}

}

آموزش React Native

اگر دوست دارید کمی کنجکاوی کنید، می توانید در شبیه سازهای تحت وب با کدها کار کنید. میتوانید کد را در فایل App.js روی سیستم خودتان بگذارید و یک app روی سیستم خودتان بسازید.

چه اتفاقی می افتد؟

کدهایی که نوشتیم ممکن است اصلا شبیه جاوا اسکریپت نباشد. نگران نباشید، این آینده ی جاوا اسکریپت است.

ES2015 یا همان ES6مجموعه ای از تغییرات روی جاوا اسکریپت است که حالا بخشی از استاندارد رسمی آن شده، اما هنوز همه ی مرورگرها از آن پشتیبانی نمی کنند، به همین دلیل هنوز به قدر کافی در زمان developبرای وب استفاده نمی شوند. React Native از ES2015 پشتیبانی می کند. می توانید از آن بدون هیچ دغدغه ای درمورد سازگاری استفاده کنید. کلمات کلیدی مثل import، from، class، extends در مثال بالا همه از ویژگی های ES2015هستند. اگر با ES2015آشنا نیستید، احتمالا فقط با خواندن همین آموزش آن را یاد می گیرید. این صفحه (لینک) مروری روی ویژگی های ES2015 دارد.

قطعه کد نامعمول دیگر این مثال Hello world! است. این JSXاست. این syntax است که XML را درون جاوااسکریپت می نشاند. Frameworkهای زیادی از زبان قالبی خاصی استفاده می کنند که به شما اجازه استفاده از کد درون markup language را بدهد. این syntax شبیه Html تحت وب به نظر می رسد، با این تفاوت که به جای استفاده از المان هایی چون